<template>
    <div class="user-center">
        <app-head :nickname-value="userInfo.nickname"
                  :avatarValue="userInfo.avatar"></app-head>
        <app-body>
            <!-- 用户信息视图 -->
            <div v-show="!eidtAddress" class="user-view">
                <!-- 用户信息卡片 -->
                <div class="user-card">
                    <div class="user-profile">
                        <el-upload
                            action="http://localhost:8080/file/upload"
                            :on-success="fileHandleSuccess"
                            :show-file-list="false"
                            accept="image/*"
                            class="avatar-uploader">
                            <el-image :src="userInfo.avatar" fit="cover" class="user-avatar">
                                <div slot="error" class="avatar-error">
                                    <i class="el-icon-user"></i>
                                </div>
                            </el-image>
                            <div class="avatar-edit">
                                <i class="el-icon-camera"></i>
                            </div>
                        </el-upload>
                        
                        <div class="user-info">
                            <h2 class="user-name">{{userInfo.nickname}}</h2>
                            <div class="user-meta">
                                <span class="join-date">
                                    <i class="el-icon-date"></i>
                                    {{ formatTime(userInfo.signInTime) }} 加入平台
                                </span>
                            </div>
                            
                            <div class="user-actions">
                                <el-button 
                                    type="primary" 
                                    icon="el-icon-edit" 
                                    @click="userInfoDialogVisible = true"
                                    class="edit-btn">
                                    编辑资料
                                </el-button>
                                <el-button 
                                    type="warning" 
                                    icon="el-icon-location-information"
                                    @click="eidtAddress=true"
                                    class="address-btn">
                                    管理地址
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 编辑用户信息对话框 -->
                <el-dialog
                    title="编辑个人信息"
                    :visible.sync="userInfoDialogVisible"
                    width="500px"
                    class="edit-dialog">
                    
                    <div class="form-item">
                        <label class="form-label">昵称</label>
                        <el-input
                            v-model="userInfo.nickname"
                            :disabled="notUserNicknameEdit"
                            @change="saveUserNickname"
                            class="nickname-input">
                            <el-button 
                                slot="append" 
                                type="warning" 
                                icon="el-icon-edit"
                                @click="notUserNicknameEdit = false"
                                class="edit-icon-btn">
                            </el-button>
                        </el-input>
                    </div>

                    <div v-if="userPasswordEdit" class="password-form">
                        <div class="form-item">
                            <label class="form-label">原密码</label>
                            <el-input v-model="userPassword1" show-password></el-input>
                        </div>
                        <div class="form-item">
                            <label class="form-label">新密码</label>
                            <el-input v-model="userPassword2" show-password></el-input>
                        </div>
                        <div class="form-item">
                            <label class="form-label">确认新密码</label>
                            <el-input v-model="userPassword3" show-password></el-input>
                        </div>
                        <el-button 
                            type="primary" 
                            @click="savePassword" 
                            class="save-password-btn">
                            确认修改
                        </el-button>
                    </div>
                    <div v-else class="form-item">
                        <label class="form-label">密码</label>
                        <el-input
                            value="123456"
                            disabled
                            show-password>
                            <el-button 
                                slot="append" 
                                type="warning" 
                                icon="el-icon-edit"
                                @click="userPasswordEdit = true"
                                class="edit-icon-btn">
                            </el-button>
                        </el-input>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="finishEdit">完成</el-button>
                    </span>
                </el-dialog>

                <!-- 物品标签页 -->
                <div class="tabs-container">
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="custom-tabs">
                        <el-tab-pane label="我发布的" name="1"></el-tab-pane>
                        <el-tab-pane label="我下架的" name="2"></el-tab-pane>
                        <el-tab-pane label="购物车" name="3"></el-tab-pane>
                        <el-tab-pane label="我卖出的" name="4"></el-tab-pane>
                        <el-tab-pane label="我买到的" name="5"></el-tab-pane>
                        <el-tab-pane label="待审核" name="6"></el-tab-pane>
                        <el-tab-pane label="审核失败" name="7"></el-tab-pane>
                    </el-tabs>
                    
                    <div class="items-list">
                        <div v-for="(item,index) in dataList[activeName-1]" :key="index" class="item-card">
                            <div class="item-content" @click="toDetails(activeName,item)">
                                <el-image
                                    class="item-image"
                                    :src="item.imgUrl"
                                    fit="cover">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                
                                <div class="item-info">
                                    <h3 class="item-title">{{item.idleName}}</h3>
                                    <div class="item-desc" v-html="item.idleDetails"></div>
                                    <div class="item-meta">
                                        <span class="item-condition">{{item.idleCondition}}</span>
                                        <span class="item-views">
                                        <i class="el-icon-view"></i> {{item.idleClick || 0}}
                                        </span>
                                        <span class="item-time">{{item.timeStr}}</span>
                                    </div>
                                    
                                    <div class="item-footer">
                                        <span class="item-price">￥{{item.idlePrice}}</span>
                                        <span v-if="activeName==='4'||activeName==='5'" class="order-status">
                                            {{orderStatus[item.orderStatus]}}
                                        </span>
                                        <el-button 
                                            v-if="activeName!=='4'&&activeName!=='5'" 
                                            type="danger" 
                                            size="mini" 
                                            plain 
                                            @click.stop="handle(activeName,item,index)"
                                            class="item-action-btn">
                                            {{handleName[activeName-1]}}
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 地址管理视图 -->
            <div v-show="eidtAddress" class="address-view">
                <el-page-header 
                    @back="eidtAddress=false"
                    content="收货地址管理"
                    class="address-header">
                </el-page-header>
                
                <!-- 新增地址表单 -->
                <div class="address-form">
                    <h3 class="form-title">新增收货地址</h3>
                    
                    <div class="form-row">
                        <el-input 
                            placeholder="请输入收货人姓名" 
                            v-model="addressInfo.consigneeName" 
                            maxlength="10"
                            show-word-limit
                            class="form-input">
                            <template slot="prepend">收货人</template>
                        </el-input>
                    </div>
                    
                    <div class="form-row">
                        <el-input 
                            placeholder="请输入收货人手机号" 
                            v-model="addressInfo.consigneePhone"
                            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" 
                            maxlength="11" 
                            show-word-limit
                            class="form-input">
                            <template slot="prepend">手机号</template>
                        </el-input>
                    </div>

                    <div class="form-row address-location">
                        <span class="input-label">省/市/区</span>
                        <el-cascader
                            :options="options"
                            v-model="selectedOptions"
                            @change="handleAddressChange"
                            :separator="' '"
                            placeholder="请选择地区"
                            class="location-cascader">
                        </el-cascader>
                        <el-tooltip content="获取当前位置" placement="top">
                            <img 
                                src="../../assets/position.png" 
                                alt="定位" 
                                class="location-icon" 
                                @click="NowPositionDetais()">
                        </el-tooltip>
                    </div>
                    
                    <div class="form-row">
                        <el-input 
                            placeholder="请输入详细地址（如道路、门牌号、小区、楼栋号等信息）" 
                            v-model="addressInfo.detailAddress"
                            maxlength="50" 
                            show-word-limit
                            class="form-input">
                            <template slot="prepend">详细地址</template>
                        </el-input>
                    </div>
                    
                    <div class="form-actions">
                        <el-checkbox v-model="addressInfo.defaultFlag">设为默认地址</el-checkbox>
                        <el-button 
                            type="primary" 
                            @click="saveAddress"
                            class="save-btn">
                            保存地址
                        </el-button>
                    </div>
                </div>
                
                <!-- 地址列表 -->
                <div class="address-list">
                    <h3 class="list-title">已有收货地址</h3>
                    
                    <el-table
                        :data="addressData"
                        style="width: 100%"
                        class="address-table"
                        stripe>
                        <el-table-column
                            prop="consigneeName"
                            label="收货人"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="consigneePhone"
                            label="手机号"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="detailAddressText"
                            label="地址">
                        </el-table-column>
                        <el-table-column 
                            label="操作"
                            width="180"
                            align="center">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)"
                                    class="table-btn">
                                    编辑
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)"
                                    class="table-btn">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            label="默认地址"
                            width="120"
                            align="center">
                            <template slot-scope="scope">
                                <el-tag 
                                    v-if="scope.row.defaultFlag" 
                                    type="success"
                                    class="default-tag">
                                    默认
                                </el-tag>
                                <el-button
                                    v-else
                                    size="mini"
                                    @click="handleSetDefault(scope.$index, scope.row)"
                                    class="set-default-btn">
                                    设为默认
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </app-body>
    </div>
</template>

<script>
    import AppHead from '../common/AppHeader.vue';
    import AppBody from '../common/AppPageBody.vue'
    import AppFoot from '../common/AppFoot.vue'
    import options from '../common/country-data.js'
    import dayjs from 'dayjs';
import { param } from 'jquery';

    export default {
        name: "me",
        components: {
            AppHead,
            AppBody,
            AppFoot
        },
        data() {
            return {
                imgFileList: [],
                addressInfo: {
                    consigneeName: '',
                    consigneePhone: '',
                    provinceName: '',
                    cityName: '',
                    regionName: '',
                    detailAddress: '',
                    defaultFlag: false
                },
                activeName: '1',
                handleName: ['下架', '删除', '取消收藏', '', ''],
                dataList: [
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                ],
                orderStatus: ['待付款', '待发货', '待收货', '已完成', '已取消'],
                userInfoDialogVisible: false,
                notUserNicknameEdit: true,
                userPasswordEdit: false,
                userPassword1: '',
                userPassword2: '',
                userPassword3: '',
                eidtAddress: false,
                idleCondition:'',//存放物品成色
                selectedOptions: [],//存放默认值
                options: options,   //存放城市数据,
                lat:'',
                lng:'',
                userInfo: {
                    accountNumber: "",
                    avatar: "",
                    nickname: "",
                    signInTime: "",
                },
                addressData: []
            };
        },
        created() {
            
                this.$api.getUserInfo().then(res => {
                    if (res.status_code === 1) {
                        res.data.signInTime = res.data.signInTime.substring(0, 10);
                        this.$globalData.userInfo = res.data;
                        this.userInfo = this.$globalData.userInfo;
                    }
                })
            
            this.getAddressData();
            this.getIdleItemData();
            this.getMyOrder();
            this.getMySoldIdle();
            this.getMyFavorite();
        },
        methods: {
                        formatTime(time) {
    if (!time) return '';
    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
},
            NowPositionDetais()
            {
                // 检查浏览器是否支持地理定位
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        // 调用后端接口获取地址信息
                        this.$api.getAddressDetails({
                                lat: lat,
                                lng: lng  
                        }).then(response => {
                        const result = response.data;                        
                        if (result.body.status === 0) {
                            const address = result.body.content.address_detail;
                            // 将获取到的地址填入收货地址或发货地址表单中
                            const city=result.body.content.address_detail.city;
                            const province=result.body.content.address_detail.province;
                            const district=result.body.content.address_detail.district;
                            const street=result.body.content.address_detail.street;
                            this.addressInfo.cityName = city;
                            this.addressInfo.provinceName=province;
                            this.addressInfo.regionName=district;
                            this.addressInfo.detailAddress=city+province+district+street;
                            
                        } else {
                            this.$message.error("获取地址失败，请重试！");
                        }
                        })
                        .catch(error => {
                        console.error("调用地址接口失败：", error);
                        this.$message.error("获取地址失败");
                        });
                    },
                    (error) => {
                        console.error("获取位置失败：", error);
                        this.$message.error("获取当前位置失败，请检查浏览器权限");
                    },
                    { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
                    );
                } else {
                    this.$message.error("浏览器不支持地理定位");
                }
            },
            getMyFavorite(){
                this.$api.getMyFavorite().then(res=>{
                    console.log('getMyFavorite',res);
                    if (res.status_code === 1){
                        for (let i = 0; i < res.data.length; i++) {
                            let pictureList = JSON.parse(res.data[i].idleItem.pictureList);
                            this.dataList[2].push({
                                favoriteId:res.data[i].id,
                                id:res.data[i].idleItem.id,
                                imgUrl:pictureList.length > 0 ? pictureList[0] : '',
                                idleName:res.data[i].idleItem.idleName,
                                idleDetails:res.data[i].idleItem.idleDetails,
                                timeStr: this.formatTime(res.data[i].createTime),
                                idlePrice:res.data[i].idleItem.idlePrice,
                                idleCondition:res.data[i].idleItem.idleCondition
                            });
                        }
                    }
                })
            },

            getMySoldIdle(){
                this.$api.getMySoldIdle().then(res=>{
                    if (res.status_code === 1){
                        console.log('getMySoldIdle',res.data);
                        for (let i = 0; i < res.data.length; i++) {
                            let pictureList = JSON.parse(res.data[i].idleItem.pictureList);
                            this.dataList[3].push({
                                id:res.data[i].id,
                                imgUrl:pictureList.length > 0 ? pictureList[0] : '',
                                idleName:res.data[i].idleItem.idleName,
                                idleDetails:res.data[i].idleItem.idleDetails,
                                timeStr: this.formatTime(res.data[i].createTime),
                                idlePrice:res.data[i].orderPrice,
                                orderStatus:res.data[i].orderStatus,
                                
                            });
                        }
                    }
                })
            },
            getMyOrder(){
                this.$api.getMyOrder().then(res=>{
                    if (res.status_code === 1){
                        console.log('getMyOrder',res.data);
                        for (let i = 0; i < res.data.length; i++) {
                            let pictureList = JSON.parse(res.data[i].idleItem.pictureList);
                            this.dataList[4].push({
                                id:res.data[i].id,
                                imgUrl:pictureList.length > 0 ? pictureList[0] : '',
                                idleName:res.data[i].idleItem.idleName,
                                idleDetails:res.data[i].idleItem.idleDetails,
                                timeStr: this.formatTime(res.data[i].createTime),
                                idlePrice:res.data[i].orderPrice,
                                orderStatus:res.data[i].orderStatus
                                
                            });
                        }
                    }
                })
            },
            getIdleItemData() {
                this.$api.getAllIdleItem().then(res => {
                    console.log("获取当前出售商品:",res);
                    if (res.status_code === 1) {
                        for (let i = 0; i < res.data.length; i++) {
                            res.data[i].timeStr = this.formatTime(res.data[i].releaseTime);
                            let pictureList = JSON.parse(res.data[i].pictureList);
                            res.data[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                            if (res.data[i].idleStatus === 1) {
                                this.dataList[0].push(res.data[i]);
                            } else if (res.data[i].idleStatus === 2) {
                                this.dataList[1].push(res.data[i]);
                            }
                            else if (res.data[i].idleStatus === 4) {
                                this.dataList[5].push(res.data[i]);
                            }
                            else if (res.data[i].idleStatus === 5) {
                                this.dataList[6].push(res.data[i]);
                            }
                        }
                    }
                })
            },
            getAddressData() {
                this.$api.getAddress().then(res => {
                    if (res.status_code === 1) {
                        let data = res.data;
                        for (let i = 0; i < data.length; i++) {
                            data[i].detailAddressText = data[i].provinceName + data[i].cityName + data[i].regionName + data[i].detailAddress;
                            data[i].defaultAddress = data[i].defaultFlag ? '默认地址' : '设为默认';
                        }
                        console.log(data);
                        this.addressData = data;
                    }
                })
            },
            handleClick(tab, event) {
                // console.log(tab, event);
                console.log(this.activeName);
            },
            saveUserNickname() {
                this.notUserNicknameEdit = true;
                this.$api.updateUserPublicInfo({
                    nickname: this.userInfo.nickname
                }).then(res => {
                    console.log(res);
                    this.$globalData.userInfo.nickname = this.userInfo.nickname;
                })

            },
            savePassword() {
                if (!this.userPassword1 || !this.userPassword2) {
                    this.$message.error('密码为空！');
                } else if (this.userPassword2 === this.userPassword3) {
                    this.$api.updatePassword({
                        oldPassword: this.userPassword1,
                        newPassword: this.userPassword2
                    }).then(res => {
                        if (res.status_code === 1) {
                            this.userPasswordEdit = false;
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                            this.userPassword1 = '';
                            this.userPassword2 = '';
                            this.userPassword3 = '';
                        } else {
                            this.$message.error('旧密码错误，修改失败！');
                        }
                    })
                } else {
                    this.$message.error('两次输入的密码不一致！');
                }

            },
            finishEdit() {
                this.notUserNicknameEdit = true;
                this.userInfoDialogVisible = false;
                this.userPasswordEdit = false;
            },
            handleAddressChange(value) {
                console.log(value);
                console.log('省份为:',this.addressInfo.provinceName);
                console.log('城市为:',this.addressInfo.cityName);

                if(this.addressInfo.provinceName===''&&this.addressInfo.cityName==='')
                {
                    console.log('执行到这里了!');
                    this.addressInfo.provinceName = value[0];
                    this.addressInfo.cityName = value[1];
                    this.addressInfo.regionName = value[2];
                }
                
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.addressInfo = JSON.parse(JSON.stringify(row));
                this.selectedOptions = ['', '', ''];
                this.selectedOptions[0] = row.provinceName;
                this.selectedOptions[1] = row.cityName;
                this.selectedOptions[2] = row.regionName;
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('是否确定删除该地址?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.deleteAddress(row).then(res => {
                        if (res.status_code === 1) {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                            this.addressData.splice(index, 1);
                            if (row.defaultFlag && this.addressData.length > 0) {
                                this.addressData[0].defaultFlag = true;
                                this.addressData[0].defaultAddress = '默认地址';
                                this.update({
                                    id: this.addressData[0].id,
                                    defaultFlag: true
                                });
                            }
                        } else {
                            this.$message.error('系统异常，删除失败！')
                        }
                    }).catch(() => {
                        this.$message.error('网络异常！')
                    });
                }).catch(() => {
                });

            },
            handleSetDefault(index, row) {
                console.log(index, row);
                row.defaultFlag = true;
                this.update(row);
            },
            toDetails(activeName, item) {
                if (activeName === '4'||activeName === '5') {
                    this.$router.push({path: '/order', query: {id: item.id}});
                } else {
                    this.$router.push({path: '/details', query: {id: item.id}});
                }
            },
            handle(activeName,item,index) {
                console.log(activeName,item,index);
                this.$confirm('是否确认？', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(activeName==='1'){
                        this.$api.updateIdleItem({
                            id:item.id,
                            idleStatus:2
                        }).then(res=>{
                            console.log(res);
                            if(res.status_code===1){
                                this.dataList[0].splice(index,1);
                                item.idleStatus=2;
                                this.dataList[1].unshift(item);
                            }else {
                                this.$message.error(res.msg)
                            }
                        });
                    }else if(activeName==='2'){
                        this.$api.updateIdleItem({
                            id:item.id,
                            idleStatus:0
                        }).then(res=>{
                            console.log(res);
                            if(res.status_code===1){
                                this.dataList[1].splice(index,1);
                            }else {
                                this.$message.error(res.msg)
                            }
                        });
                    }else if(activeName==='3'){
                        this.$api.deleteFavorite({
                            id: item.favoriteId
                        }).then(res=>{
                            console.log(res);
                            if(res.status_code===1){
                                this.$message({
                                    message: '已取消收藏！',
                                    type: 'success'
                                });
                                this.dataList[2].splice(index,1);
                            }else {
                                this.$message.error(res.msg)
                            }
                        }).catch(e=>{
                        })
                    }
                }).catch(() => {
                });

            },
            fileHandleSuccess(response, file, fileList) {
                console.log("file:", response, file, fileList);
                let imgUrl = response.data;
                this.imgFileList = [];
                this.$api.updateUserPublicInfo({
                    avatar: imgUrl
                }).then(res => {
                    console.log(res);
                    this.userInfo.avatar = imgUrl;
                    this.$globalData.userInfo.avatar = imgUrl;
                })
            },
            update(data) {
                this.$api.updateAddress(data).then(res => {
                    if (res.status_code === 1) {
                        this.getAddressData();
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('系统异常，修改失败！')
                    }
                }).catch(() => {
                    this.$message.error('网络异常！')
                })
            },
            saveAddress() 
            {
                if(this.addressInfo.consigneeName
                    &&this.addressInfo.consigneePhone
                    &&this.addressInfo.detailAddress
                )
                {
                if (this.addressInfo.id) {
                    console.log('update:', this.addressInfo);
                    this.update(this.addressInfo);
                    this.addressInfo = {
                        consigneeName: '',
                        consigneePhone: '',
                        provinceName: '',
                        cityName: '',
                        regionName: '',
                        detailAddress: '',
                        defaultFlag: false
                    };
                    this.selectedOptions = [];
                } else {
                    if (this.addressData.length >= 5) {
                        this.$message.error('已达到最大地址数量！')
                    } else {
                        console.log(this.addressInfo);
                        this.$api.addAddress(this.addressInfo).then(res => {
                            if (res.status_code === 1) {
                                this.getAddressData();
                                this.$message({
                                    message: '新增成功！',
                                    type: 'success'
                                });
                                this.selectedOptions = [];
                                this.addressInfo = {
                                    consigneeName: '',
                                    consigneePhone: '',
                                    provinceName: '',
                                    cityName: '',
                                    regionName: '',
                                    detailAddress: '',
                                    defaultFlag: false
                                };
                            } else {
                                this.$message.error('系统异常，新增失败！')
                            }
                        }).catch(e => {
                            this.$message.error('网络异常！')
                        })
                    }
                }
            }
            else
            {
                this.$message.error("请填写完整信息！")
            }
            }
        }
    }
</script>

<style scoped>
/* 全局样式 */
:root {
  --primary-color: #ff5500;
  --primary-light: #ff7733;
  --text-color: #333;
  --text-light: #666;
  --border-color: #e0e0e0;
  --bg-color: #f8f8f8;
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.user-center {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 用户信息卡片 */
.user-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 30px;
  margin: 20px;
}

.user-profile {
  display: flex;
  align-items: center;
}

.avatar-uploader {
  position: relative;
  margin-right: 30px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  color: #999;
  font-size: 40px;
}

.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-edit:hover {
  background: var(--primary-light);
  transform: scale(1.1);
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 28px;
  margin: 0 0 10px;
  color: var(--text-color);
}

.user-meta {
  margin-bottom: 20px;
}

.join-date {
  font-size: 14px;
  color: var(--text-light);
}

.join-date i {
  margin-right: 5px;
}

.user-actions {
  display: flex;
  gap: 15px;
}

.edit-btn, .address-btn {
  padding: 10px 20px;
  border-radius: 20px;
}

.edit-btn {

  border: none;
}

.edit-btn:hover {
  background: #ff5500;
}

.address-btn {
  background: white;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.address-btn:hover {
  background: rgba(255, 85, 0, 0.1);
}

/* 编辑对话框 */
.edit-dialog {
  border-radius: 12px;
}

.edit-dialog >>> .el-dialog__header {
  border-bottom: 1px solid var(--border-color);
}

.edit-dialog >>> .el-dialog__title {
  color: var(--text-color);
  font-weight: 600;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-light);
}

.nickname-input, .password-input {
  width: 100%;
}

.edit-icon-btn {
  padding: 12px;
}

.password-form {
  margin-top: 30px;
}

.save-password-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
}

/* 标签页 */
.tabs-container {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  margin: 20px;
  padding: 20px;
}

/* 标签页样式优化 */
.custom-tabs >>> .el-tabs__item {
  font-size: 16px;
  padding: 0 25px;
  height: 50px;
  line-height: 50px;
  color: #666; /* 未选中状态文字颜色 */
  transition: all 0.3s;
}

.custom-tabs >>> .el-tabs__item:hover {
  color: #ff5500; /* 悬停时文字颜色 */
}

.custom-tabs >>> .el-tabs__item.is-active {
  color: #ff5500; /* 选中状态文字颜色 */
  font-weight: 600; /* 加粗显示 */
}

.custom-tabs >>> .el-tabs__active-bar {
  background-color: #ff5500; /* 选中指示条颜色 */
  height: 3px;
}



/* 物品列表 */
.items-list {
  margin-top: 20px;
}

.item-card {
  border-bottom: 1px solid var(--border-color);
  padding: 15px 0;
  transition: all 0.3s;
}

.item-card:last-child {
  border-bottom: none;
}

.item-card:hover {
  background: rgba(255, 85, 0, 0.03);
  transform: translateY(-2px);
}

.item-content {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.item-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-right: 20px;
  flex-shrink: 0;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #999;
}
.item-views {
  font-size: 13px;
  color: #999;
  margin-right: 15px;
}

.item-views i {
  margin-right: 3px;
}
.item-info {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-desc {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  display: flex;
  margin-bottom: 8px;
}

.item-condition {
  font-size: 13px;
  color: #666;
  margin-right: 15px;
}

.item-time {
  font-size: 13px;
  color: #999;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-price {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
}

.order-status {
  font-size: 14px;
  color: #666;
}

.item-action-btn {
  padding: 5px 15px;
}

/* 地址管理视图 */
.address-view {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  margin: 20px;
  padding: 20px;
}

.address-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.address-header >>> .el-page-header__left::after {
  background-color: var(--primary-color);
}

.address-header >>> .el-page-header__content {
  font-size: 18px;
  color: var(--text-color);
}

/* 地址表单 */
.address-form {
  padding: 20px;
  margin-bottom: 40px;
  border-radius: 8px;
  background: #f9f9f9;
}

.form-title {
  font-size: 16px;
  color: var(--primary-color);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
}

.form-row {
  margin-bottom: 20px;
}

.form-input >>> .el-input-group__prepend {
  background: white;
  color: var(--text-light);
  width: 80px;
}

.address-location {
  display: flex;
  align-items: center;
}

.input-label {
  font-size: 14px;
  color: var(--text-light);
  margin-right: 15px;
  width: 80px;
}

.location-cascader {
  flex: 1;
}

.location-icon {
  width: 32px;
  height: 32px;
  margin-left: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.location-icon:hover {
  transform: scale(1.1);
}

.form-actions {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.save-btn {
  margin-left: 20px;
  padding: 10px 30px;
}

/* 地址列表 */
.address-list {
  margin-top: 40px;
}

.list-title {
  font-size: 16px;
  color: var(--primary-color);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
}

.address-table {
  border-radius: 8px;
  overflow: hidden;
}

.address-table >>> th {
  background: #f5f5f5 !important;
  color: var(--text-color);
}

.table-btn {
  padding: 5px 10px;
}

.default-tag {
  border-radius: 10px;
}

.set-default-btn {
  padding: 5px 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-profile {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-uploader {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .user-actions {
    justify-content: center;
  }
  
  .item-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .item-image {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
    height: auto;
    max-height: 200px;
  }
  
  .address-location {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .input-label {
    margin-bottom: 10px;
    margin-right: 0;
  }
  
  .location-icon {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>